<template>
  <div class="header-mobile">
    <div class="title-bar">
      <h1 class="nav-title">购物车</h1>
    </div>
    <div class="main-wrapper is-header-shown is-bottom-shown">
      <div v-if="userInfo" class="shop">
        <div v-if="shop.length > 0">
          <ul class="item-list item-holder">
            <li v-for="(l, i) in shop" :key="i" class="SZY-INVALID-LI">
              <div class="cart-checkbox goods-checkbox select">
                <van-checkbox
                  v-model="l.checked"
                  @click="changeCheck(l, i)"
                ></van-checkbox>
              </div>
              <div class="inner">
                <div class="goods-pic">
                  <img
                    :src="l.good.list[0].sku_info[0].ali_image"
                    alt=""
                    class="itempic"
                  />
                </div>
              </div>
              <dl class="goods-info">
                <dt class="goods-name">
                  <p class="item-title">
                    {{ l.good.list[0].sku_info[0].title }}
                  </p>
                </dt>
                <dd class="goods-attr" @click="deleteOne(l, i)">删除</dd>
                <dd class="good-info-bottom ub">
                  <em class="goods-price price-color ub-f1"
                    >￥: {{ l.good.list[0].sku_info[0].price }}
                  </em>
                  <div class="goods-num amount amount-btn">
                    <van-stepper
                      v-model="l.num"
                      disable-input
                      @change="changeCount(l)"
                    />
                  </div>
                </dd>
              </dl>
            </li>
          </ul>

          <div class="flow-bottom">
            <div class="cart-checkbox all-checkbox">
              <div class="cart-checkbox goods-checkbox select">
                <van-checkbox v-model="quanxuan">全选</van-checkbox>
              </div>
            </div>
            <div id="cart_count">
              <div class="total">
                <div class="total-money">
                  <span>合计：</span>
                  <div class="dd">
                    <p class="SZY-CART-SELECT-GOODS-AMOUNT price-color">
                      {{ count ? count : 0 }}
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="submit-btn check-btn bg-color SZY-CART-SUBMIT"
                @click="gocomputed"
              >
                去结算
              </div>
            </div>
          </div>
        </div>

        <div v-else>
          <div class="empty-container">
            <div class="img-container1"></div>
            <h3>购物车暂无商品</h3>
            <p>添加到购物车的商品将会显示在这里</p>
            <p href="" class="buy-btn box-border" @click="oooo">现在选购</p>
          </div>
        </div>
      </div>
      <div v-else class="empty-container">
        <div>
          <div class="img-container"></div>
          <h3>购物车暂无商品</h3>
          <p>添加到购物车的商品将会显示在这里</p>
          <p class="buy-btn login" @click="wwwww">登录</p>
          <p href="" class="buy-btn box-border" @click="oooo">现在选购</p>
        </div>
      </div>
    </div>

    <div></div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      shop: [],
      // count: 0,
    };
  },

  mounted() {
    this.$ajax
      .caxun({
        phone: this.userInfo.phone,
      })
      .then((res) => {
        this.shop = res;
        console.log(this.shop);
      });
  },
  computed: {
    count: {
      get() {
        return this.shop
          .filter((item) => item.checked)
          .reduce(
            (sum, l) => (sum += l.num * l.good.list[0].sku_info[0].price),
            0
          );
      },
    },
    quanxuan: {
      get() {
        // return item.checked.every((item) => item.checked);
        console.log(111);

        return this.shop.every((item) => item.checked);
        // return console.log(this.shop.every((item) => item.checked));
      },
      set(v) {
        console.log(v);
        // var shop = this.shop.map((item) => {
        //   return { ...item, checked: v };
        // });
        // this.goods = this.goods.map((item) => {
        //   item.check = v;
        //   return item;
        // });

        this.shop = this.shop.map((item) => {
          return { ...item, checked: v };
        });
      },
    },
  },
  methods: {
    // 全选

    deleteOne(l, i) {
      this.$dialog
        .confirm({
          title: "删除",
          message: "确定删除吗？",
        })
        .then(() => {
          this.$ajax.removeCartOne(l.id).then((res) => {
            this.shop.splice(i, 1);
            // this.changeCartList(this.shop);
          });
        })
        .catch(() => {});
    },
    gocomputed() {},
    changeCount(l) {
      console.log(l);
      this.$ajax
        .changeCartOne(l.id, {
          num: l.num,
        })
        .then((res) => {});
    },
    changeCheck(v, i) {
      this.shop[i].checked = v.checked;
      console.log(this.shop);
      // console.log(this.shop);
    },
    wwwww() {
      this.$router.push({ name: "logins" });
    },
    oooo() {
      this.$router.push({ name: "page" });
    },
  },
};
</script>

<style lang="scss" scoped>
.header-mobile {
  .title-bar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    height: 51px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    z-index: 199;
    .nav-title {
      color: rgba(0, 0, 0, 0.6);
      font-size: 18px;
      font-weight: 700;
      line-height: 48px;
      text-align: center;
      position: absolute;
      top: 0;
      left: 60px;
      right: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .is-header-shown {
    padding-top: 50px;
    overflow: scroll;
    padding-bottom: 54px;
    .empty-container {
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      .img-container {
        width: 88px;
        height: 114px;
        background: url()
          no-repeat top;
        background-size: 88px auto;
        margin: 0 auto;
      }
      h3 {
        color: rgba(0, 0, 0, 0.15);
        margin: 25px 0 9px;
        font-size: 20px;
      }
      p {
        font-size: 14px;
        text-align: center;
        color: rgba(0, 0, 0, 0.15);
      }
      .buy-btn {
        display: inline-block;
        width: 142px;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        font-weight: 700;
        margin: 16px 5px 0;
        text-decoration: none;
      }
      .login {
        box-shadow: inset 0 -1px 1px rgb(0 0 0 / 20%), 0 0 1px rgb(0 0 0 / 10%),
          0 1px 3px rgb(0 0 0 / 20%);
        background: linear-gradient(#6f94e8, #5178df);
        border-radius: 6px;
        text-shadow: 0 -1px 0 rgb(0 0 0 / 15%);
        color: #fff;
      }
      .box-border {
        display: inline-block;
        width: 142px;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.6);
        margin: 16px 1px 0;
        background: linear-gradient(
          rgba(0, 0, 0, 0.01),
          hsla(0, 0%, 100%, 0.01)
        );
        position: relative;
        box-shadow: inset 0 2px 4px hsl(0deg 0% 100% / 30%);
      }
      .box-border::before {
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.12);
      }
      .box-border:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: -42.85714%;
        left: 0;
        right: -42.85714%;
        transform: scale(0.7);
        transform-origin: 0 0;
      }
    }
  }
}

.empty-container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  .img-container1 {
    width: 88px;
    height: 114px;
    background: url()
      no-repeat top;
    background-size: 88px auto;
    margin: 0 auto;
  }
  h3 {
    color: rgba(0, 0, 0, 0.15);
    margin: 25px 0 9px;
    font-size: 20px;
  }
  p {
    font-size: 14px;
    text-align: center;
    color: rgba(0, 0, 0, 0.15);
  }
  .buy-btn {
    display: inline-block;
    width: 142px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-weight: 700;
    margin: 16px 5px 0;
    text-decoration: none;
  }
  .login {
    box-shadow: inset 0 -1px 1px rgb(0 0 0 / 20%), 0 0 1px rgb(0 0 0 / 10%),
      0 1px 3px rgb(0 0 0 / 20%);
    background: linear-gradient(#6f94e8, #5178df);
    border-radius: 6px;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 15%);
    color: #fff;
  }
  .box-border {
    display: inline-block;
    width: 142px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    margin: 16px 1px 0;
    background: linear-gradient(rgba(0, 0, 0, 0.01), hsla(0, 0%, 100%, 0.01));
    position: relative;
    box-shadow: inset 0 2px 4px hsl(0deg 0% 100% / 30%);
  }
  .box-border::before {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
  }
  .box-border:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -42.85714%;
    left: 0;
    right: -42.85714%;
    transform: scale(0.7);
    transform-origin: 0 0;
  }
}
.item-holder {
  width: 100%;
  overflow: hidden;
  background: #fff;
  li {
    display: block;
    position: relative;
    padding: 8px 3.24px 8px 8px;
    .cart-checkbox {
      position: absolute;
      top: 27.2px;
      margin-right: 0;
      padding-left: 5px;
    }
    .inner {
      display: block;
      margin: 0 0 0 20.8px;
      position: relative;
      border-bottom: 0.8px solid #fff;
      .goods-pic {
        display: block;
        width: 70px;
        height: 70px;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        border: 1px solid #f8f8f8;
        box-sizing: border-box;
        img {
          width: 100%;
        }
      }
    }
    .goods-info {
      display: block;
      margin: 5px 0 0 90px;
      position: relative;
      padding-right: 3.2px;
      min-height: 68.8px;
      .goods-name {
        display: block;
        position: relative;
        height: 26.4px;
        overflow: hidden;
        .item-title {
          display: block;
          height: 25.6px;
          line-height: 12.8px;
          overflow: hidden;
          font-size: 13px;
          color: #222;
        }
      }
      .goods-attr {
        height: 11.2px;
        line-height: 11.2px;
        overflow: hidden;
        font-size: 13px;
        color: #999;
        white-space: nowrap;
        text-overflow: ellipsis;
        float: right;
        padding: 0 20px 20px;
      }
      .good-info-bottom {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 28px;
        color: #f23030;
        .goods-price {
          line-height: 35px;
          font-size: 13px;
        }
      }
    }
  }
}
.item-list {
  .goods-num {
    position: relative;
    float: right;
    margin-right: 8px;
    .decrease {
      display: inline-block;
      float: left;
      width: 28px;
      height: 28px;
      cursor: pointer;
      position: relative;
      z-index: 10;
      i {
        background: url(https://m.sctx.com/images/goods/good-icon.png) no-repeat;
        background-size: 100px 100px;
        width: 14px;
        height: 14px;
        background-position: -31px -85px;
        display: block;
        margin: 7px;
      }
    }
    .decrease:after {
      border-color: /*m_main_color_start*/ #f23030 /*m_main_color_end*/;
      height: 100%;
      content: "";
      width: 1px;
      // border-right: 1px solid #fa0000;
      position: absolute;
      top: 0;
      right: 0;
      transform: scaleX(0.5);
      -webkit-transform: scaleX(0.5);
      z-index: 10;
    }
    .increase {
      display: inline-block;
      float: left;
      width: 28px;
      height: 28px;
      cursor: pointer;
      position: relative;
      z-index: 10;
      i {
        // background-position: -31px -67px;
        background: url(https://m.sctx.com/images/goods/good-icon.png) no-repeat;
        background-size: 100px 100px;
        width: 14px;
        height: 14px;
        background-position: -31px -67px;
        display: block;
        margin: 7px;
      }
    }
  }

  .num {
    display: inline-block;
    border: 0;
    width: 42px;
    height: 26px;
    float: left;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    color: #232326;
    position: relative;
    z-index: 2;
    margin-top: 1px;
  }

  .increase:before {
    right: auto;
    left: 0px;
  }
  .increase:before {
    height: 100%;
    content: "";
    width: 1px;
    // border-right: 1px solid #fa0000;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleX(0.5);
    -webkit-transform: scaleX(0.5);
    z-index: 10;
  }
}
input {
  position: relative;
  width: 14.4px;
  height: 14.4px;
  border: 1px solid #ccc;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  vertical-align: middle;
}
.increase:before {
  border-color: /*m_main_color_start*/ #f23030 /*m_main_color_end*/;
}
.goods-num:before {
  border-color: /*m_main_color_start*/ #f23030 /*m_main_color_end*/;
  text-align: center;
  line-height: 56px;
  font-size: 28px;
  // border: 0.026667rem solid #fa0000;
  border-radius: 8px;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200%;
  height: 200%;
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(0.5, 0.5);
  -webkit-box-sizing: border-box;
}

.flow-bottom {
  width: 100%;
  position: fixed;
  bottom: 1.7rem;
  left: 0;
  height: 32px;
  background: #fff;
  z-index: 101;
  border-top: 1px solid #eee;
  .cart-checkbox {
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 8px;
    width: 70px;
    margin-left: 0px;
    // margin-bottom: 10px;
    input {
      position: relative;
      vertical-align: middle;
      display: block;
      width: 20px;
      height: 16px;
      background-size: 50px auto;
      background-color: #fff;
    }
    span {
      position: absolute;
      left: 25px;
      top: 0px;
      display: block;
      width: 35px;
      line-height: 16px;
      font-size: 11.2px;
      vertical-align: middle;
    }
  }
  .total {
    display: block;
    float: left;
    text-align: right;
    width: 75%;
  }
  .total-money {
    height: 16px;
    margin-right: 16px;
    padding-top: 8px;
    font-size: 0;
    line-height: 16px;
    span {
      display: inline-block;
      font-size: 11.2px;
      position: relative;
      bottom: 2px;
    }
    .dd {
      display: inline-block;
      font-size: 11.2px;
      font-weight: 600;
      p {
        font-size: 14.4px;
        color: /*m_second_color_start*/ #f23030 /*m_second_color_end*/;
      }
    }
  }
  .check-btn {
    display: block;
    float: right;
    width: 25%;
    height: 33px;
    color: #fff;
    line-height: 33px;
    font-size: 12.8px;
    text-align: center;
    position: relative;
    top: -0.8px;
    cursor: pointer;
    background: /*m_main_ color_start*/ #f23030 /*m_main_color_end*/;
  }
}
</style>